<template >
    <div id="basic">
      <!-- <div class="title">慢性病人膳食测评报告</div> -->
      <!-- <div id="createTime">报告日期：{{ report_time }}</div> -->
      <!-- <el-divider  border-style="dashed"  style="border-color:#ff5722">
        <div class="subTitle">基本信息</div>
      </el-divider> -->
      <div style="display:flex;">
        <div style=" width: 60%; background-color:#ff5722; height: 100px; text-align: center; line-height: 100px;">
            <span style="font-size: 30px; font-weight: bold; color: #ffffff">慢性病人</span><span style="font-size: 30px; color: #666666; margin-left: 20px">基本信息报告</span>
          </div>
          <div style="height: 100px; width: 40%; background-color:#ff5722; ">
            <!-- <img src="../../assets/img/11.jpg" style="height: 100%; width: 100%" alt=""/> -->
          </div>
      </div>
     
      <!-- <div class="every">
        <div><span>姓名 </span><span>{{contents.username ?? '[]'}}</span></div>
      </div>
      <div class="every">
        <div><span>性别 </span><span>{{contents.sex == 1 ? '女':'男' ?? '[]'}}</span></div>
      </div>
      <div class="every">
        <div><span>出生日期：</span><span>{{birth ?? '[]'}}</span></div>
      </div>
      <div class="every">
        <div><span>监护人姓名：</span><span>{{contents.guardian_name ?? '[]'}}</span></div>
      </div>
      <div class="every">
        <div><span>监护人手机号：</span><span>{{contents.guardian_mobile ?? '[]'}}</span></div>
      </div>
      <div class="every">
        <div><span>身高：</span><span>{{contents.weigh ?? '[]'}}CM</span></div>
      </div>
      <div class="every">
        <div><span>体重：</span><span>{{contents.height ?? '[]'}}KG</span></div>
      </div>
      <div class="every">
        <div><span>头围：</span><span>{{contents.touwei ?? '[]'}}</span></div>
      </div>
      <div class="every">
        <div><span>出生身长：</span><span>{{contents.chushengsg ?? '[]'}}CM</span></div>
      </div>
      <div class="every">
        <div><span>出生体重：</span><span>{{contents.chushengtz ?? '[]'}}</span></div>
      </div>
      <div class="every">
        <div><span>腹围：</span><span>{{contents.fuwei ?? '[]'}}</span></div>
      </div>
      <div class="every">
        <div><span>血型：</span><span>{{contents.xuexing_value ?? '[]'}}</span></div>
      </div>
      <div class="every">
        <div><span>民族：</span><span>{{contents.minzu_value ?? '[]'}}</span></div>
      </div>
      <div class="every">
        <div><span>与监护人关系：</span><span>{{contents.guanxi_value ?? '[]'}}</span></div>
      </div>
      <div class="every">
        <div><span>家长受教育程度：</span><span>{{contents.jiaoyu_value ?? '[]'}}</span></div>
      </div>
      <div class="every" style="width: 100%">
        <div><span>出生情况：</span><span>{{contents.birthSituation_value ?? '[]'}}</span></div>
      </div> -->
       <div style="width: 100%; height: 40px; background-color: #ff5722; margin-top: 10px; display: flex;">
              <div><img src="../../assets/img/12_2.png" style="height: 40px" alt="" /></div>
              <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">慢性病人基本信息</div>
            </div>
            <div style="width: 1070px; border-top: 2px solid #ff5722; border-right: 2px solid #ff5722;  margin-top: 10px">
              <div style="display: flex">
                <div style="background-color: #ff5722; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">检测日期</div>
                <div style="width: 90%; height: 40px; border-bottom: 2px solid #ff5722; line-height: 40px; text-indent: 20px;">
                  {{ report_time }}
                </div>
              </div>
              <div style="display: flex">
                <div style="background-color: #ff5722; width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
                  慢性病人姓名
                </div>
                <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
                  {{contents.username ?? '[]'}}
                </div>
                <div style="background-color: #ff5722;width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #ff5722; border-bottom: 2px solid #ff5722;">
                  性别
                </div>
                <div style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #ff5722; border-bottom: 2px solid #ff5722;">
                  {{contents.sex == 1 ? '女':'男' ?? '[]'}}
                </div>
                <div style="background-color: #ff5722; width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #ff5722; border-bottom: 2px solid #ff5722;">
                  出生日期
                </div>
                <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
                  {{birth ?? '[]'}}
                </div>
                <div style=" background-color:#ff5722; width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
                  监护人姓名
                </div>
                <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #ff5722;">
                  {{contents.guardian_name ?? '[]'}}
                </div>
              </div>
              <div style="display: flex">
                <div style="background-color: #ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
                  监护人手机号
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #ff5722; border-bottom: 2px solid #ff5722; " >
                  {{contents.guardian_mobile ?? '[]'}}
                </div>
                <div style="background-color: #ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
                  身高
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #ff5722; border-bottom: 2px solid #ff5722; " >{{contents.height ?? '[]'}}CM
                </div>
                <div style="background-color: #ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
                  体重
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #ff5722; border-bottom: 2px solid #ff5722; " >{{contents.weight ?? '[]'}}KG
                </div>
                <div style="background-color: #ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
                  头围
                </div>
                <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #ff5722;">
                  {{contents.touwei ?? '[]'}}CM
                </div>
              </div>
              <div style="display: flex">
                <div style="background-color: #ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
                  出生身长
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #ff5722; border-bottom: 2px solid #ff5722; " >{{contents.chushengsg ?? '[]'}}CM
                </div>
                <div style="background-color:#ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
                  出生体重
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #ff5722; border-bottom: 2px solid #ff5722; " >{{contents.chushengtz ?? '[]'}}KG
                </div>
                <div style="background-color: #ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
                  腹围
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #ff5722; border-bottom: 2px solid #ff5722; " >{{contents.fuwei ?? '[]'}}CM
                </div>
                <div style="background-color: #ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
                  血型
                </div>
                <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #ff5722;">
                  {{contents.xuexing_value ?? '[]'}}
                </div>
              </div>
              <div style="display: flex">
                <div style="background-color: #ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
                  民族
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #ff5722; border-bottom: 2px solid #ff5722; " >{{contents.minzu_value ?? '[]'}}
                </div>
                <div style="background-color: #ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
                  监护关系
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #ff5722; border-bottom: 2px solid #ff5722; " >{{contents.guanxi_value ?? '[]'}}
                </div>
                <div style="background-color: #ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
                  家长教育
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #ff5722; border-bottom: 2px solid #ff5722; " >{{contents.jiaoyu_value ?? '[]'}}
                </div>
                <div style="background-color: #ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
                  出生情况
                </div>
                <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #ff5722;">
                  {{contents.birthSituation_value ?? '[]'}}
                </div>
              </div>
            </div>
  
      <!-- <div class="symptom">
        <div class="params ">
          <div class="shu"></div>
          其他信息</div>
        <div class="symptom_content">
          <div>妊娠不良习惯：{{contents.Bad_value ?? '[]'}}</div>
        </div>
        <div class="symptom_content">
          <div>妊娠疾病情况：{{contents.disease_value ?? '[]'}}</div>
        </div>
      </div> -->
       <!-- 其他信息 -->
            <div style="width: 100%;height: 40px;background-color: #ff5722;margin-top: 10px;display: flex;">
              <div><img src="../../assets/img/12_2.png" style="height: 40px" alt="" /></div>
              <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
                其他信息
              </div>
            </div>
            <div style="width: 1070px; border-top: 2px solid #ff5722; border-right: 2px solid #ff5722; margin-top: 10px">
              <div style="display: flex; ">
                <div style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
                  妊娠不良习惯
                </div>
                <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
                   {{contents.Bad_value ?? '[]'}}
                   
                </div>
              </div>
              <div style="display: flex">
                  <div style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
                  妊娠疾病情况
                </div>
                 <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
                     {{contents.disease_value ?? '[]'}}
                </div>
              </div>
            </div>
  
      <!-- <div class="symptom">
        <div class="params ">
          <div class="shu"></div>
          孩子临床表现</div>
        <div class="symptom_content">
          <div>头发：{{contents.hair_value ?? '[]'}}</div>
        </div>
        <div class="symptom_content">
          <div>眼睛：{{contents.eye_value ?? '[]'}}</div>
        </div>
        <div class="symptom_content">
          <div>皮肤：{{contents.skin_value ?? '[]'}}</div>
        </div>
        <div class="symptom_content">
          <div>口腔：{{contents.oralCavity_value ?? '[]'}}</div>
        </div>
        <div class="symptom_content">
          <div>牙齿：{{contents.tooth_value ?? '[]'}}</div>
        </div>
        <div class="symptom_content">
          <div>颈部：{{contents.neck_value ?? '[]'}}</div>
        </div>
        <div class="symptom_content">
          <div>神经病变：{{contents.Neuropathy_value ?? '[]'}}</div>
        </div>
        <div class="symptom_content">
          <div>神经症状：{{contents.symptoms_value ?? '[]'}}</div>
        </div>
        <div class="symptom_content">
          <div>体征：{{contents.sign_value ?? '[]'}}</div>
        </div>
        <div class="symptom_content">
          <div>骨骼：{{contents.bones_value ?? '[]'}}</div>
        </div>
      </div> -->
  
    <!-- 孩子临床表现 -->
            <div style="width: 100%;height: 40px;background-color: #ff5722;margin-top: 10px;display: flex;">
              <div><img src="../../assets/img/12_2.png" style="height: 40px" alt="" /></div>
              <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
                孩子临床表现
              </div>
            </div>
            <div style="width: 1070px;  border-top: 2px solid #ff5722; border-right: 2px solid #ff5722; margin-top: 10px">
              <div style="display: flex">
                <div style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
                  头发
                </div>
                <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
                  {{contents.hair_value ?? '[]'}}
                </div>
              </div>
              <div style="display: flex">
                     <div style="background-color:#ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
                  眼睛
                </div>
                 <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
                  {{contents.eye_value ?? '[]'}}
                </div>
              </div>
              <div style="display: flex">
                     <div style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
                  皮肤
                </div>
                <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
                  {{contents.skin_value ?? '[]'}}
                </div>
              </div>
              <div style="display: flex">
                 <div style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
                  口腔
                </div>
                 <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
                  {{contents.oralCavity_value ?? '[]'}}
                </div>
              </div>
              <div style="display: flex">
                <div style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
                  牙齿
                </div>
                  <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
                  {{contents.tooth_value ?? '[]'}}
                </div>
              </div>
              <div style="display: flex">
              <div style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
                  颈部
                </div>
                 <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
                   {{contents.neck_value ?? '[]'}}
                </div>
              </div>
              <div style="display: flex">
               <div style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
                  神经病变
                </div>
                 <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
                  {{contents.Neuropathy_value ?? '[]'}}
                </div>
              </div>
              <div style="display: flex">
                <div style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
                  神经症状
                </div>
                 <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
                    {{contents.symptoms_value ?? '[]'}}
                </div>
              </div>
              <div style="display: flex">
                <div style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
                  体征
                </div>
                 <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
                     {{contents.sign_value ?? '[]'}}
                </div>
              </div>
              <div style="display: flex">
                 <div style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
                  骨骼
                </div>
                 <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
                       {{contents.bones_value ?? '[]'}}
                </div>
  
              </div>
            </div>
  
      <!-- <div class="symptom">
        <div class="params ">
          <div class="shu"></div>
          食物过敏</div>
        <div class="symptom_content">
          <div>过敏食物：{{contents.allergy_value ?? '[]'}}</div>
        </div>
        <div class="symptom_content">
          <div>食物不耐受：{{contents.intolerance_value ?? '[]'}}</div>
        </div>
      </div> -->
  
        <!-- 食物过敏 -->
            <div style="width: 100%;height: 40px;background-color: #ff5722;margin-top: 10px;display: flex;">
              <div><img src="../../assets/img/12_2.png" style="height: 40px" alt="" /></div>
              <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
                食物过敏
              </div>
            </div>
            <div style="width: 1070px;  border-top: 2px solid #ff5722; border-right: 2px solid #ff5722; margin-top: 10px">
              <div style="display: flex">
              <div style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
                  过敏食物
                </div>
                   <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
                          {{contents.allergy_value ?? '[]'}}
                </div>
              </div>
  
              <div style="display: flex">
                <div style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
                  食物不耐饿
                </div>
                   <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
                              {{contents.intolerance_value ?? '[]'}}
                </div>
              </div>
            </div>
    </div>
  </template>
  
  <script setup>
  import {defineComponent, onMounted, ref, watch} from 'vue';
  import {useRoute, useRouter} from "vue-router"
  import http, {baseUrl} from "../../utils/http";
  import {ElMessage} from "element-plus";
  const contents = ref({})
  const reportId = ref()
  const router = useRouter()
  const route = useRoute()
  const hospital_name = ref()
  const report_time = ref()
  const birth = ref()
  
  const username = ref()
  const guardian = ref()
  const birthStatus = ref()
  import PrintJS from 'print-js'
  
  const fetchData = async () => {
    reportId.value = route.params.reportId
    username.value = route.params.username
    guardian.value = route.params.guardian
    birthStatus.value = route.params.birth
    http.get('api/archives/viewReportMember?id='+ reportId.value+'&username='+ username.value+'&guardian='+ guardian.value+'&birth='+ birthStatus.value).then((res)=> {
      if (res.data.code === 0) {
        ElMessage.error(res.data.msg)
      }
      report_time.value = res.data.data.times
      birth.value = $getTimes(res.data.data.contents.birth)
      contents.value = res.data.data.contents;
      // contents.births.value = '2077-07-07'
    })
  
    setTimeout(() => {
      print('print-all')
    }, 2000)
  
  }
  function $getTimes(params) {
    let date = new Date(params);
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    m = m < 10 ? "0" + m : m;
    let d = date.getDate();
    d = d < 10 ? "0" + d : d;
    const time = y + "-" + m + "-" + d;
    return time;
  }
  
  onMounted(() => {
    fetchData()
  })
  </script>
  
  <style scoped>
  #basic .title {
    font-size: 36px;
    width: 100%;
    text-align: center;
  }
  #basic #createTime {
    font-size: 16px;
    color:#999999;
    float: right;
  }
  
  .params {
    width: 100%;
    font-size: 22px;
    font-weight: bold;
  }
  .shu {
    width: 5px;
    height: 30px;
    background: #ff5722;
    opacity: 1;
    border-radius: 100px;
    float: left;
    margin-right: 2%;
  }
  .subTitle {
    font-size: 30px;
    text-align: center;
    height: 30px;
    color: #ff5722;
    /*border-bottom: 1px dashed  red;*/
  }
  .every {
    height: 35px;
    line-height: 35px;
    min-width: 33%;
    float: left;
    font-weight: bold;
  }
  #basic .symptom {
    text-align: left;
    line-height: 35px;
    float: left;
  }
  
  #basic {
    font-size: 16px;
    width: 1075px;
    min-height: 1244px;
    overflow: hidden;
    padding: 0;
    word-break:break-all;
    /*margin: 60px auto 0 auto;*/
    box-shadow: var(--el-box-shadow-light);
    border-radius: var(--el-card-border-radius);
    background-color: var(--el-card-bg-color);
    /* color: var(--el-text-color-primary); */
    transition: var(--el-transition-duration);
    --el-card-border-color: var(--el-border-color-light, #ebeef5);
    --el-card-border-radius: 4px;
    --el-card-padding: 20px;
    --el-card-bg-color: var(--el-color-white);
  }
  #basic .symptom .every {
    width: 30%;
    float: left;
  }
  .symptom_content{
    width: 100%;
    float: left;
  
  }
  
  </style>
  